<template>
	<div class="chat-product" @click="goDetial">
		{{ chat }}
		<div class="box" :class="selfSend ? 'chat-msg-mine' : ''">
			<div class="top">
				<img :src="chat.image" />
				<div class="text">{{ chat.productName }}</div>
			</div>
			<div class="bottom">
				{{ source }}
			</div>
		</div>
	</div>
</template>

<script>
import {
	getProductSource,
} from '@/api/common.js'
export default {
	name: "chatItem",
	data() {
		return {
			source: null
		}
	},
	props: {
		chat: {
			type: Object
		},
		index: {
			type: Number
		},
		selfSend: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		goDetial() {
			let data = {
				url: "/store",
				productId: this.chat.productId,
				resizable: true,
				width: 1920,
				height: 1080
			};
			this.$ipcRenderer.send("open-win", data);
			// uni.navigateTo({
			// 	url: `/pages/shop/index?url=${this.chat.productSourceUrl}`
			// })
		},
		getDict() {
			getProductSource().then((result) => {
				result.forEach(element => {
					if (element.dictValue == this.chat.productSource)
						this.source = element.dictLabel
				});

			}).catch((err) => {

			});
		}
	},
	created() {
		this.getDict();

	},
	onload() {
		console.log(this.chat)
	},
	computed: {


		atText() {
			if (this.chat.atMe) {
				return "[有人@我]"
			} else if (this.chat.atAll) {
				return "[@全体成员]"
			}
			return "";
		}
	}
}
</script>

<style scoped lang="scss">
.chat-product {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 20px 0;
}

.box {
	position: relative;
	width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 10px 10px 10px;
	background: #f1f1f1;
	border-radius: 20px;
	// letter-spacing: 4px;
	color: #000;

	.top {
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 16px;

		.text {
			color: #000;
			font-size: 12px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: normal;
			word-wrap: break-word;
			margin-top: 10px;
		}

		img {
			width: 200px;
			border-radius: 10px;
		}
	}

	.bottom {
		border-top: 1px solid #fff;
		padding: 10px 0 0 0;
		font-size: 10px;
		text-align: left;
		color: #000;
	}


}

.box.chat-msg-mine {
	&:after {
		right: -18px;
		left: auto;
	}
}
</style>